<template>
    <view class="detail-box">
        <block v-for="(item,index) in orderSummaryArr" :key="item.id">
            <view class="detail-item">
				<!-- 收货人姓名和电话号码 -->
				<view class="userInfo">
					<view class="left">收货人:{{item.user_name}}</view>
					<view class="right" @click="callPhone(item.user_tel)" v-if="item.order_status != 4">
						<image src="../../static/icon/user-phone.png" mode="aspectFit"></image>
					</view>
				</view>
				
				<!-- 取货信息 -->
				<view class="shopAddr">
					<view class="left">
					    <view class="txt">取</view>
						<text>{{item.shop.shop_address}}</text>
					</view>
					<view class="right" @click="jumpMap(item.shop.shop_address,item.shop.shop_location,item.recieve_address,item.recieve_location)" v-if="item.order_status != 4">
						<image src="../../static/icon/detail-address.png" mode="aspectFit"></image>
					</view>
				</view>
				
				<!-- 送货信息 -->
				<view class="userAddr">
					<view class="left">
					    <view class="txt">送</view>
						<text>{{item.recieve_address}}</text>
					</view>
					
					<view class="right" @click="jumpMap(item.shop.shop_address,item.shop.shop_location,item.recieve_address,item.recieve_location)" v-if="item.order_status != 4">
						<image src="../../static/icon/detail-address.png" mode="aspectFit"></image>
					</view>
				</view>
				
				<view class="word">
					<text>订单编号:{{item.order_no}}</text>
					<text>下单时间:{{item.create_time}}</text>
					<text>订单内容:{{item.order_content}}</text>
				</view>
					
				<!-- 顶部按钮 -->
				<view class="btn">
					<!-- 需判断是否为待收货状态 决定是否显示-->
					<view @click="cancelOrder(item.id,index,item.order_no)" v-if="item.order_status == 1">取消订单</view>
					
					<!-- 需判断配送任务状态，决定显示'取到商品' 还是 '确认送到' -->
					<view @click="getGoods(item.id,index,item.order_no)" v-if="item.order_status == 1">取到商品</view>
					<!-- <view>确认送达</view> -->
					<view @click="finishOrder(item.id,index,item.order_no)" v-else-if="item.order_status != 4">确认送达</view>
				</view>
            </view>
        </block>
    </view>
</template>

<script>
	// 引用公共函数
	import util from '../../utils/util.js'
	
	export default {
		props: ['orderSummaryArr'],
		methods:{
			//----------------事件监听函数--------------------
			callPhone:function(data){
				uni.makePhoneCall({
				    phoneNumber: data
				});
			},
			jumpMap:function(shopAddress,shopLac,recieveAddress,recieveLac){
				//保存参数到数据库(缓存)
				var amapRoute = {
					shopAddress:shopAddress,
					recieveAddress:recieveAddress,
					shopLac:shopLac,
					recieveLac:recieveLac
				};
				console.log(amapRoute);
				uni.setStorageSync('amapRoute',amapRoute);
				
				// 1.保留当前页面，跳转到应用内的某个页面
				// 2.在跳转页面可以点击返回按钮，返回当前页面
				uni.navigateTo({
					//绝对路径，不能写为/pages/map/map
					url: '../../pages/map/map'
				})
			},
			cancelOrder:function(id,index,no){
				var data = {
					usertoken:uni.getStorageSync('usertoken'),
					orderno:no,
					orderstatus:2
				};
				util.post('horseman/cancelorder',data,(res) => {
					console.log(res);
					this.$emit('refreshPage');
				})
			},
			getGoods:function(id,index,no){
				var data = {
					usertoken:uni.getStorageSync('usertoken'),
					orderno:no,
					orderstatus:3
				};
				util.post('horseman/getgoods',data,(res) => {
					console.log(res);
					this.$emit('refreshPage');
				})
			},
			finishOrder:function(id,index,no){
				var data = {
					usertoken:uni.getStorageSync('usertoken'),
					orderno:no,
					orderstatus:4
				};
				util.post('horseman/finishorder',data,(res) => {
					console.log(res);
					this.$emit('finishOrder');
				})
			}
		}
	}
</script>

<style lang="scss">
	.detail-box{
		margin:20rpx 20rpx 20rpx 20rpx;
		display: flex;
		font-size: 32rpx;  
		.detail-item{
			display: flex;
			flex-direction: column;
			min-height: 300rpx;
			width: 100%;
			border-radius: 10rpx;
			background-color: #F5F6F5;
			
			.userInfo{
				margin: 10rpx;
				display: flex;
				justify-content: space-between;
				
				image{
					height: 40rpx;
				}
				
				.left{
					display: flex;
					flex-direction: row;
					flex-wrap: row;
					align-items: center;
					width: 90%;
				}
				
				.right{
					display: flex;
					align-items: center;
					width: 10%;
				}
			}
			
			.shopAddr{
				margin: 10rpx;
				display: flex;
				flex-direction: row;
				
				.left{
					display: flex;
					flex-direction: row;
					flex-wrap: row;
					align-items: center;
					width: 90%;
					.txt{
						margin: 0 20rpx 0 0;
						width: 50rpx;
						height: 50rpx;
						border-radius: 10rpx;
						background-color: #61A6E6;
						border:1rpx solid #61A6E6;
						color: white;
						text-align: center;   //文字横坐标居中
						line-height: 50rpx;   //文字纵坐标居中,和容器的高度一致
					}
				}
				
				.right{
					display: flex;
					align-items: center;
					width: 10%;
				}
			}
			
			.userAddr{
				margin: 10rpx;
				display: flex;
				flex-direction: row;
				
				.left{
					display: flex;
					flex-direction: row;
					align-items: center;
					width: 90%;
					.txt{
						margin: 0 20rpx 0 0;
						width: 50rpx;
						height: 50rpx;
						border-radius: 10rpx;
						background-color: #FF6622;
						border:1rpx solid #FF6622;
						color: white;
						text-align: center;   //文字横坐标居中
						line-height: 50rpx;   //文字纵坐标居中,和容器的高度一致
					}
				}
				
				.right{
					display: flex;
					align-items: center;
					width: 10%;
				}
			}
			
			.word{
				margin: 10rpx;
				display: flex;
				flex-direction: column;
			}
			
			.btn{
				margin: 10rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-around;
			}
		}
	}
	
	.detail-item .shopAddr > view > image{
		height: 40rpx;
	}
	
	.detail-item .userAddr > view > image{
		height: 40rpx;
	}
	
	.btn > view{
		width: 200rpx;
		height: 60rpx;
		border-radius: 10rpx;
		background-color: #FF6622;
		border:1rpx solid #FF6622;
		color: white;
		align-self: center;
		text-align: center;   //文字横坐标居中
		line-height: 60rpx;   //文字纵坐标居中,和容器的高度一致
	}
	
</style>
